<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<style type="text/css">
		#formGet {
			line-height: 30px;
			/*垂直居中关键*/
			text-align: center;
			font-size: 18px;
		}

		span {
			font-size: 9px;
		}
	</style>
</head>

<body>
	<div style="text-align: center;font-size: 30px;">用户登录</div>
	<form id="formGet" method="get" action="#">
		<table>
			<tr>
				<label name="username">
					用户名
					<input type="text" id="username" name="username" />
					<br>
					<span id="username_err" style="display: none">用户名不符合规范<br></span>
				</label>
			</tr>
			<tr>
				<label name="pass">
					密码
					<input type="password" id="pass" name="pass" />
					<br>
					<span id="pass_err" style="display: none">密码不符合规范<br></span>
				</label>
			</tr>
			<tr>
				<label name="tel">
					手机号
					<input type="text" id="tel" name="tel" />
					<br>
					<span id="tel_err" style="display: none">手机号不符合规范<br></span>
				</label>
			</tr>
			<tr>
				<input type="submit" name="sub" value="注册" />
				<span id="submit_err" style="display: none">错误<br></span>
			</tr>
		</table>
	</form>
	<script>

		var usernameInpit = document.getElementById("username");
		var passInpit = document.getElementById("pass");
		var telInpit = document.getElementById("tel");

		function checkUsername() {
			let username = usernameInpit.value.trim();
			let reg = /^\w{6,12}$/;
			var flag = reg.test(username);
			if (flag) {
				document.getElementById("username_err").style.display = 'none';
			} else {
				document.getElementById("username_err").style.display = '';
			}
			return flag;
		}

		function checkPass() {
			let pass = passInpit.value.trim();
			let reg = /^\w{6,12}$$/;
			var flag = reg.test(pass);
			if (flag) {
				document.getElementById("pass_err").style.display = 'none';	
			} else {
				document.getElementById("pass_err").style.display = '';
			}
			return flag;
		}

		function checkTel() {
			let tel = telInpit.value.trim();
			let reg = /^[1]\d{10}$/;
			var flag = reg.test(tel);
			if (flag) {
				document.getElementById("tel_err").style.display = 'none';
			} else {
				document.getElementById("tel_err").style.display = '';
			}
			return flag;
		}

		var formGet = document.getElementById("formGet");
		formGet.onsubmit = function () {
			let flag = checkUsername()&& checkPass()&&checkTel();
			return flag;
		}
	</script>
</body>

</html>